/* eslint-disable react/no-unknown-property */
import React, { FC, useRef, useState } from 'react'
import style from '@/style/index.module.scss'
import { useNavigate } from 'react-router-dom'
import axios from '@/api/request'
const Search: FC = () => {
  const navigate = useNavigate()
  const searInp: any = useRef()
  const [data, setdata] = useState([])
  const searchBtn = (): void => {
    const getData = searInp.current.value
    void axios.get('/wipi/api/search/article', { params: { keyword: getData } }).then(res => {
      setdata(res.data)
    })
    console.log(searInp.current.value)
  }
  return <div className={style.search}>
    <div className={style.sernav}><h3>Search Articles</h3> <span onClick={() => { navigate('/') }}>X</span></div>
    <div className={style.serinp}><input ref={searInp} type="text" placeholder='Enter keywords, search articles'/><svg onClick={() => searchBtn()} string="1671450220100" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2314" width="24" height="24"><path d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z" p-id="2315"></path></svg></div>
    <div>
      {
        data?.map((item: { title: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | Iterable<React.ReactNode> | null | undefined }, index: React.Key | null | undefined) => {
          return <h3 style={{ lineHeight: '40px' }} key={index}>{item.title}</h3>
        })
      }
    </div>
  </div>
}

export default Search
